<template>
	<view>
		<u-navbar title="视频营销" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="right">
				<u-icon name="camera" color="#999" size="30" @click="gonav"></u-icon>
			</view>
		</u-navbar>
		<view class="generate">
			<u--image :showLoading="true" src="/static/home/ai.webp" width="180rpx" height="180rpx"></u--image>
			<view class="generate-right">
				<view class="title">
					AI视频生成工具
				</view>
				<view class="text">
					内容快速生成、灵活的解决方案、直观编辑和优化视频
				</view>
			</view>
		</view>
		<view class="content">
			<view class="btn-box">
				<view :class="item.show == true?'btn':'activity-btn'" v-for="(item,index) in btnList" :key="index"
					@click="hjff(index)">
					{{item.text}}
				</view>
			</view>
			<view class="video" v-if="type == 0">
				<view class="video-item" v-for="(item,index) in 4" :key="index">
					<view class="item-img">
						<u--image radius="20" :showLoading="true" src="/static/home/home-swiper.png" width="100%"
							height="400rpx"></u--image>
						<view class="play">
							<u--image radius="20" :showLoading="true" src="/static/home/play.png" width="80rpx"
								height="80rpx"></u--image>
						</view>
					</view>
					<view class="item-text">
						<view>
							模板编号：THSI234
						</view>
						<view class="Jump">
							Advertisement
						</view>
					</view>
					<view class="video-btn">
						<u-button size="large" shape="circle" color="#999" type="primary" :plain="true"
							text="使用次模板创建视频" @click="gocenter"></u-button>
					</view>
				</view>
			</view>
			<view class="standing" v-if="type == 1">
				<view class="tabs">
					<view :class="item.status == true?'active-item':'tabs-item'" v-for="(item,index) in tabs"
						:key="index" @click="onTabs(index)">
						{{item.text}}
					</view>
					<view class="new">
						New
					</view>
				</view>
				<view class="identity">
					<view class="identity-item" v-for="(item,index) in 10" :key="index">
						<u--image radius="20" :showLoading="true" src="/static/home/home-swiper.png" width="330rpx"
							height="400rpx"></u--image>
							<view class="item-text">
								Alex
							</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList: [{
						text: '视频营销',
						show: true
					},
					{
						text: '智能替身',
						show: false
					},
				],
				tabs: [{
						text: '全部',
						status: true
					},
					{
						text: '男性',
						status: false
					},
					{
						text: '女性',
						status: false
					},
					{
						text: '生成AI数字人',
						status: false
					},
				],
				type:0
			}
		},
		methods: {
			hjff(index) {
				this.btnList.map(item => {
					item.show = false
				})
				this.btnList[index].show = true
				this.type = index
			},
			onTabs(index) {
				this.tabs.map(item => {
					item.status = false
				})
				this.tabs[index].status = true
			},
			gonav(){
				uni.navigateTo({
					url:'/pages/index/video/details'
				})
			},
			gocenter(){
				uni.navigateTo({
					url:'/pages/index/video/center'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.generate {
		background-color: #f8f8f8;
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;

		.generate-right {
			margin-left: 30rpx;

			.title {
				font-size: 38rpx;
				font-weight: 700;
				color: #333333;
			}

			.text {
				font-size: 30rpx;
				color: #868686;
				margin-top: 20rpx;
			}
		}
	}

	.content {
		padding: 30rpx;

		.btn-box {
			padding: 10rpx;
			background-color: #f8f8f8;
			border-radius: 55rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-size: 28rpx;

			.btn {
				width: 45%;
				color: #000000;
				border-radius: 55rpx;
				padding: 20rpx;
				font-weight: 700;
				background-color: #ffffff;
			}

			.activity-btn {
				width: 45%;
				padding: 20rpx;
				color: #666666;
				border-radius: 55rpx;
			}
		}

		.video {
			margin-top: 30rpx;

			.video-item {
				margin-top: 30rpx;

				.item-img {
					position: relative;

					.play {
						position: absolute;
						top: 45%;
						left: 45%;
					}
				}

				.item-text {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
					font-size: 26rpx;

					.Jump {
						font-size: 24rpx;
						background-color: #ffffff;
						border-radius: 20rpx;
						border: 2rpx solid #bfbfbf;
						padding: 5rpx 10rpx;
					}
				}
			}
		}

		.standing {
			margin-top: 50rpx;
			.tabs {
				display: flex;
				font-size: 26rpx;
				position: relative;
				.new {
					position: absolute;
					right: 15rpx;
					top: -20rpx;
					color: #ffff;
					font-size: 24rpx;
					background-color: #f56c6c;
					border-radius: 20rpx;
					padding: 4rpx 10rpx;
				}

				.tabs-item {
					padding: 5rpx 30rpx;
					border-radius: 30rpx;
					margin-right: 20rpx;
					color:#999;
					border: 2rpx solid #999;
				}

				.active-item {
					background-color: #000000;
					color: #ffffff;
					padding: 5rpx 30rpx;
					border-radius: 30rpx;
					margin-right: 20rpx;
					border: 2rpx solid transparent;
				}
			}
			.identity {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.identity-item {
					position: relative;
					margin-top: 30rpx;
					.item-text {
						position: absolute;
						top: 20rpx;
						left: 20rpx;
						color: #ffffff;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>